<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>注册</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .vali_pass {
            width: 350px;
            margin: 0 auto;
            padding: 10px;
            border: #eee 1px solid;
            text-align: center;
        }

        .vali_pass input {
            width: 96%;
            display: block;
            margin: 0;
            padding: 5px;
            font-size: 14px;
            line-height: 20px;
        }

        .vali_pass_progress {
            margin-top: 10px;
            background-color: #efefef;
            height: 10px;
            border-radius: 5px;
        }

        .vali_pass_inner_progress {
            display: block;
            height: 100%;
            background-color: transparent;
            border-radius: 5px;
            width: 100%;
        }

        .error {
            background-color: #ff3300;
        }

        .middle {
            background-color: gold;
        }

        .strong {
            background-color: green;
        }
    </style>

</head>
<body onload="checkForm()" onkeydown="on_return();">

<div id="page" class="site row">

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{login}"><i class="fa fa-sign-in"></i>登录</a></li>
                        <li class="active"><a th:href="@{register}"><i class="fa fa-user"></i> 注册 </a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--Page Cover-->
        <section class="row page-cover" data-slide="assets/images/slide1.jpg">
            <div class="container">
                <h2 class="this-title">欢迎注册 Mlearning</h2>
            </div>
        </section>
    </header>

    <main id="contents" class="site-contnts">
        <!--404 Contents-->
        <section class="row contact-form-section" style="background: #f2f6f8;">
            <div class="container">
                <div class="tab-content hst-contents">
                    <div role="tabpanel" class="tab-pane active" id="hst-1">
                        <form id="register" name="register" method="post" th:action="@{register}"
                              class="contact-form">
                            <div class="col-sm-6 contact-form-box contact-box" style="padding-top:50px">
                                <div class="form-group">
                                    <label for="name">用户名</label>
                                    <input type="text" name="name" id="name" placeholder="" class="form-control"
                                           required="required">
                                    <p id="name_info" class="form-control"
                                       style="text-align: center;display: none;background-color: #eeeeee"></p>
                                </div>
                                <div class="form-group">
                                    <label for="pd1">密码</label>
                                    <input type="password" id="pd1" placeholder="数字、字母、符号组成、不少于6位"
                                           class="form-control" required="required">
                                    <input type='hidden' name="password" id='sha_pwd' value=''/>
                                    <div class="vali_pass_progress"><span class="vali_pass_inner_progress"></span></div>
                                    <p id="pd1_info" class="form-control"
                                       style="text-align: center;display: none;background-color: #eeeeee"></p>
                                </div>
                                <div class="form-group">
                                    <label for="pd2">确认密码</label>
                                    <input type="password" id="pd2" placeholder="确认密码"
                                           class="form-control" required="required">
                                    <p id="pd2_info" class="form-control"
                                       style="text-align: center;display: none;background-color: #eeeeee"></p>
                                </div>
                            </div>
                            <div class="col-sm-6 contact-form-box contact-box" style="padding-top:50px">
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input type="email" name="email" id="email" placeholder=""
                                           class="form-control" required="required">
                                    <p id="email_info"
                                       style="text-align: center;color:red;display: none;background-color: #eeeeee"
                                       class="form-control"></p>
                                </div>
                                <div class="form-group">
                                    <label>验证码&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="btn"
                                                                             class="btn btn-primary" id="btn"
                                                                             value="发送验证码"
                                                                             style="border: 1px solid #ff6726;border-radius: 5px;line-height: 34px;
                                                        padding: 0 20px;float: right;background: #fff;color: #ff6726;"/>
                                    </label>
                                    <div>
                                        <input type="text" name="code" id="code" placeholder="请输入邮箱的验证码"
                                               class="form-control" required>
                                        <p id="code_info"
                                           style="text-align: center;display: none;background-color: #eeeeee"
                                           class="form-control"></p>
                                    </div>
                                </div>
                                <p id="message"
                                   style="text-align: center;display: none;background-color: #eeeeee"
                                   class="form-control" th:text="${message}"></p>
                                <input id="sub" type="button" onclick="on_submit()" value="注册" class="btn btn-primary"
                                       style="width: 100%;">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: white">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>
<script th:src="@{assets/js/contact.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>
<script th:src="@{sha/sha1.js}"></script>
<!--表单验证-->
<script>
    /*
    用户
    */
    var can_name = false;
    $("#name").onblur = function (){
        var name = $("#name").val();
        var name_info = $("#name_info");
        if (name === '') {
            name_info.text('用户名不能为空！');
            name_info.css("display", "");
            name_info.css("color", "red");
            can_name = false;
        } else {
            name_info.css("display", "none");
            can_name = true;
        }
    };

    /*
    密码验证
    */
    var pd1 = document.getElementById("pd1");
    var pd2 = document.getElementById("pd2");
    var pd_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
    var pd_classname = pd_progress.className;
    var regxs = [];
    regxs.push(/[^a-zA-Z0-9_]/g);
    regxs.push(/[a-zA-Z]/g);
    regxs.push(/[0-9]/g);

    // 判断密码强度
    var can_pd1 = false;
    var can_pd2 = false;
    pd1.onkeyup = function () {
        var val = this.value;
        var len = val.length;
        var sec = 0;
        if (len >= 6) { // 至少六个字符
            for (var i = 0; i < regxs.length; i++) {
                if (val.match(regxs[i])) {
                    sec++;
                }
            }
            can_pd1 = true;
        } else {
            document.getElementById("pd1_info").innerText = "密码不少于6位!";
            document.getElementById("pd1_info").style.color = "red";
            document.getElementById("pd1_info").style.display = "";
            pd1.focus();
            can_pd1 = false;
            // document.getElementById("sub").disabled = true;
        }
        var result = (sec / regxs.length) * 100;
        pd_progress.style.width = result + "%";
        if (result > 0 && result <= 50) {
            pd_progress.setAttribute("class", pd_classname + " error");

            document.getElementById("pd1_info").innerText = "密码强度：低";
            document.getElementById("pd1_info").style.color = "black";
            document.getElementById("pd1_info").style.display = "";

        } else if (result > 50 && result < 100) {
            pd_progress.setAttribute("class", pd_classname + " middle");

            document.getElementById("pd1_info").innerText = "密码强度：中";
            document.getElementById("pd1_info").style.color = "black";
            document.getElementById("pd1_info").style.display = "";

        } else if (result == 100) {
            pd_progress.setAttribute("class", pd_classname + " strong");

            document.getElementById("pd1_info").innerText = "密码强度：高";
            document.getElementById("pd1_info").style.color = "black";
            document.getElementById("pd1_info").style.display = "";
        }
    };
    // 判断密码一致性
    pd2.onkeyup = function () {
        if (pd1.value === pd2.value) {
            document.getElementById("pd2_info").innerText = "输入密码一致";
            document.getElementById("pd2_info").style.display = "none";
            can_pd2 = true;
        } else {
            document.getElementById("pd2_info").innerText = "输入密码不一致";
            document.getElementById("pd2_info").style.color = "red";
            document.getElementById("pd2_info").style.display = "";
            can_pd2 = false;
        }
    };


    /*
    邮箱
    */
    var can_email = false;
    // //判断邮箱是否可用
    // $("#email").blur(function () {
    //     var email = $("#email").val();
    //     $.get("checkuseremail", {email: email},
    //         function (data) {
    //             document.getElementById("email_info").innerText = data;
    //             document.getElementById("email_info").style.display = "";
    //
    //             if (data === "邮箱已被注册!") {
    //                 $("#email").focus();
    //                 document.getElementById("email_info").style.color = "red";
    //                 // document.getElementById("sub").disabled = true;
    //                 can_email = false;
    //             } else {
    //                 document.getElementById("email_info").style.display = "none";
    //                 // document.getElementById("message").style.display = "none";
    //                 can_email = true;
    //             }
    //         });
    // });

    //发送验证码
    var can_send = false;
    $("#btn").click(function () {
        if ($("#email").val()) {

            // $(".checkemail").focus();
            var email = $("#email").val();
            $.get("checkuseremail", {email: email},
                function (data) {
                    document.getElementById("email_info").innerText = data;
                    document.getElementById("email_info").style.display = "";

                    if (data === "邮箱已被注册!") {
                        $("#email").focus();
                        document.getElementById("email_info").style.color = "red";
                        can_email = false;

                        document.getElementById("email_info").style.display = "";
                        document.getElementById("email_info").innerText = "请重新输入邮箱！";
                        document.getElementById("email_info").style.color = "red";
                        $("#email").focus();
                        setTimeout(function () {
                            document.getElementById("email_info").style.display = "none";
                        }, 1000000);
                    } else {
                        document.getElementById("email_info").style.display = "none";
                        // document.getElementById("message").style.display = "none";
                        can_email = true;

                        $.ajax({
                            type: "POST",
                            url: "SendEmailServlet?random=" + Math.random(),
                            data: {
                                email: $("#email").val(),
                            },
                            success: function (data) {
                                if (data === '发送失败') {
                                    alert("验证码发送失败,请检查邮箱格式和正确性！");
                                    can_send = false;
                                } else {
                                    alert("验证码发送成功，请注意查收。长时间没有收到时，请检查您输入的邮箱地址是否正确。");
                                    can_send = true;
                                }
                            },
                            error: function (data) {
                                alert("验证码发送失败,请检查邮箱格式和正确性！");
                                can_send = false;
                            }
                        })
                    }
                });
        } else {
            document.getElementById("email_info").style.display = "";
            document.getElementById("email_info").innerText = "请填写邮箱!";
            document.getElementById("email_info").style.color = "red";
            $("#email").focus();
            setTimeout(function () {
                document.getElementById("email_info").style.display = "none";
            }, 1000000);
        }
    });

    //判断验证码是否正确
    var can_code = false;
    $("#code").change(function () {
        var code = $("#code").val();
        $.get("checkcode", {code: code},
            function (data) {
                document.getElementById("code_info").innerText = data;
                document.getElementById("code_info").style.display = "";

                if (data == "验证码不正确") {
                    document.getElementById("code_info").style.color = "red";
                    // document.getElementById("sub").disabled = true;
                    can_code = false;
                }
                if (data == "请点击发送验证码按钮！") {
                    document.getElementById("code_info").style.color = "red";
                    // document.getElementById("sub").disabled = true;
                    can_code = false;
                }
                if (data == "验证成功") {
                    document.getElementById("code_info").style.display = "none";
                    can_code = true;
                }
            });
    });


    /*
    提交注册
     */
    //回车时，默认是登陆
    function on_return() {
        if (window.event.keyCode === 13) {
            if (document.getElementById('sub') != null) {
                document.getElementById('sub').click();
            }
        }
    }

    function checkForm() {
        var flag = true;
        var message = document.getElementById("message").innerText;
        if (message !== 'null' && message !== "" && message != null) {
            // alert(message);
            document.getElementById("message").style.display = "";
            flag = false;
        }
        return flag;
    }

    function on_submit() {
        if (can_name && can_email && can_send && can_pd1 && can_pd2 && can_code) {
            var sha_pd = document.getElementById("sha_pwd");
            sha_pd.value = sha1(pd1.value);
            console.log("填写成功");

            $("#register").submit();
        } else {
            console.log(can_name , can_email , can_send,can_pd1 , can_pd2 , can_code);
            //用户名
            var name = $("#name").val();
            var name_info = $("#name_info");
            if (name === '') {
                name_info.text('用户名不能为空！');
                name_info.css("display", "");
                name_info.css("color", "red");
                return ;
            } else {
                name_info.css("display", "none");

                if(pd1.value === ''){
                    var pd1_info = $("#pd1_info");
                    pd1_info.text("密码不能为空！");
                    pd1_info.css("display", "");
                    pd1_info.css("color", "red");
                    return ;
                }else {
                    if(pd2.value === ''){
                        var pd2_info = $("#pd2_info");
                        pd2_info.text("密码不能为空！");
                        pd2_info.css("display", "");
                        pd2_info.css("color", "red");
                        return ;
                    }else {
                        var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                        if($("#email").val() === '' || $("#email").val().search(reg) === -1){
                            var email_info = $("#email_info");
                            email_info.text("请填写正确邮箱！");
                            email_info.css("display", "");
                            email_info.css("color", "red");
                            return ;
                        }else {
                            if($("#code").val() === ''){
                                var code_info = $("#code_info");
                                code_info.text("请填写验证码！");
                                code_info.css("display", "");
                                code_info.css("color", "red");
                                return ;
                            }else {
                                $("#message").text("请按照提示修改信息！");
                                $("#message").css("display","none");
                            }
                        }

                    }


                }

            }

        }
    }
</script>
</body>
</html>